import React from 'react'

const css = `
  html[data-theme="dark"] path {
    fill: white;
  }

  .graphic-logo {
    width: 150px;
    height: auto;
  }`

export const Logo = () => {
  return (
    <svg
      className="graphic-logo"
      fill="#0F0F0F"
      viewBox="0 0 518 563"
      xmlns="http://www.w3.org/2000/svg"
    >
      <style type="text/css">{css}</style>
      <g fill="#000000" stroke="none" transform="translate(0,563) scale(0.1,-0.1)">
        <path
          d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
          -2170z m1855 301 c52 -24 88 -63 117 -126 19 -42 23 -71 26 -182 4 -151 -8
          -213 -58 -281 -55 -77 -140 -107 -230 -83 -66 18 -105 53 -141 128 -31 61 -33
          74 -37 189 -5 145 16 233 69 298 60 72 169 97 254 57z m766 8 c74 -25 126 -85
          144 -166 l7 -33 -45 0 c-41 0 -45 2 -50 29 -15 75 -102 125 -177 102 -84 -25
          -126 -130 -118 -295 5 -109 36 -189 88 -226 39 -28 129 -31 178 -6 26 14 31
          23 37 69 4 29 5 66 3 82 -3 30 -4 30 -70 33 l-68 3 0 34 0 35 110 0 110 0 0
          -129 0 -130 -32 -24 c-54 -40 -97 -58 -154 -64 -189 -20 -311 148 -290 399 12
          141 66 241 151 279 46 21 126 24 176 8z m774 -8 c105 -49 151 -165 143 -368
          -4 -104 -7 -117 -39 -180 -41 -82 -91 -121 -164 -129 -145 -17 -241 78 -266
          264 -19 144 13 296 79 366 60 63 167 84 247 47z m-2505 -296 l0 -305 165 0
          165 0 0 -35 0 -35 -210 0 -210 0 0 340 0 340 45 0 45 0 0 -305z"
        />
        <path
          d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
          44 24 63 24 184 1 122 -2 140 -23 183 -13 26 -36 56 -51 67 -33 23 -102 26
          -140 6z"
        />
        <path
          d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
          -120 2 -134 27 -187 30 -65 64 -88 129 -88 35 0 48 6 79 38 52 52 63 98 58
          257 -3 117 -6 134 -28 173 -14 24 -37 50 -52 58 -40 21 -110 18 -141 -6z"
        />
      </g>
    </svg>
  )
}
